<template>
  <div>
    <lb-title :isBack="true"></lb-title>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="authForm"
        :rules="authFormRules"
        ref="authForm"
        label-width="110px"
      >
        <el-form-item v-if="version" label="小程序" prop="modular_id">
          <el-select
            :disabled="!!authForm.id"
            v-model="authForm.modular_id"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in miappOptions"
              :key="item.modular_id"
              :label="item.mini_name"
              :value="item.modular_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-else label="小程序" prop="mini_name">
          <el-input v-model="authForm.mini_name"></el-input>
        </el-form-item>
        <el-form-item label="选择代理商" prop="agent_id">
          <el-select
            v-model="authForm.agent_id"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in agentAuthSelect"
              :key="item.id"
              :label="item.user_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版权信息" prop="copyright_id">
          <el-select
            v-model="authForm.copyright_id"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in copyrightOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传配置" prop="upload_setting">
          <el-select
            v-model="authForm.upload_setting"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in uploadConfigSelect"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名片数量" prop="number">
          <el-input-number
            class="lb-input-number"
            placeholder="请输入允许创建名片的数量"
            :controls="false"
            v-model="authForm.number"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="BOSS数量" prop="boss">
          <el-input-number
            class="lb-input-number"
            placeholder="请输入允许开通BOSS的数量"
            :controls="false"
            v-model="authForm.boss"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          :label="item.title"
          :prop="item.name"
          v-for="(item, index) in authForm.authList"
          :key="index"
        >
          <el-radio-group
            v-model="authForm[item.name]"
            v-if="item.formType === 'radio'"
          >
            <el-radio
              v-for="citem in switchOptions"
              :key="citem.value"
              :label="citem.value"
              >{{ $t('action.' + citem.label) }}</el-radio
            >
          </el-radio-group>
          <lb-tool-tips
            :tips="`填写了此项参数后，新建的小程序的能否使用${item.title}功能将采用此项设置`"
          ></lb-tool-tips>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="5"
            maxlength="100"
            resize="none"
            show-word-limit
            placeholder="请输入备注"
            v-model="authForm.remark"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="到期时间" prop="end_time">
          <el-date-picker
            v-model="authForm.end_time"
            type="datetime"
            placeholder="选择日期时间"
            default-time="23:59:59"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormInfo('authForm')">{{
            $t('action.submit')
          }}</el-button>
          <el-button type="default" @click="$router.back(-1)">{{
            $t('action.back')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      version: false,
      agentAuthSelect: [],
      uploadConfigSelect: [],
      authForm: {
        id: '',
        mini_name: '',
        modular_id: '',
        agent_id: '',
        upload_setting: '',
        copyright_id: '',
        number: '',
        boss: '',
        send_switch: 0,
        appiont: 0,
        payqr: 0,
        article: 0,
        activity: 0,
        house_switch: 0,
        shop_switch: 0,
        pay_shop: 0,
        timeline_switch: 0,
        website_switch: 0,
        passenger_switch: 0,
        baidu_switch: 0,
        closure_switch: 0,
        redbag_switch: 0,
        reduction_switch: 0,
        livevideo_switch: 0,
        shortvideo_switch: 0,
        member_switch: 0,
        restaurant_switch: 0,
        overlord_switch: 0,
        payclass_switch: 0,
        bargain_switch: 0,
        question_switch: 0,
        appclass_switch: 0,
        helppay_switch: 0,
        material_switch: 0,
        brochure_switch: 0,
        douyin_switch: 0,
        car_switch: 0,
        banquet_switch: 0,
        integral_switch: 0,
        remark: '',
        end_time: '',
        authList: []
      },
      authFormRules: {
        modular_id: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        mini_name: { required: true, type: 'string', message: '请填写', trigger: 'blur' },
        agent_id: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        copyright_id: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        upload_setting: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        number: { required: true, type: 'number', message: '请选择', trigger: 'blur' },
        boss: { required: true, type: 'number', message: '请选择', trigger: 'blur' },
        send_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        appiont: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        payqr: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        article: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        activity: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        house_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        shop_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        pay_shop: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        timeline_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        website_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        passenger_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        baidu_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        douyin_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        closure_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        redbag_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        reduction_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        livevideo_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        shortvideo_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        member_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        restaurant_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        overlord_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        payclass_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        bargain_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        question_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        appclass_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        helppay_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        material_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        brochure_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        car_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        banquet_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        integral_switch: { required: true, type: 'number', message: '请选择', trigger: 'change' },
        end_time: { required: true, type: 'object', message: '请选择', trigger: 'change' }
      },
      switchOptions: [
        {
          value: 1,
          label: 'ON'
        },
        {
          value: 0,
          label: 'OFF'
        }
      ],
      miappOptions: [],
      copyrightOptions: [
        {
          id: 0,
          name: '不限制'
        }
      ]
    }
  },

  created () {
    this.version = JSON.parse(localStorage.getItem('vs'))
    let { id } = this.$route.query
    if (id) {
      this.getFormInfo(id)
    } else {
      this.getCommAppAuthList()
    }
    this.getAgentAuthSelect()
    this.getUploadConfigSelect()
    this.getminiAppList()
    this.getCopyrightList()
  },
  methods: {
    getAgentAuthSelect () {
      this.$api.agentAuthSelect().then(res => {
        if (res.code === 200) {
          this.agentAuthSelect = res.data
        }
      })
    },
    getUploadConfigSelect () {
      this.$api.uploadConfigSelect().then(res => {
        if (res.code === 200) {
          this.uploadConfigSelect = res.data
        }
      })
    },
    getCommAppAuthList () {
      this.$api.getCommAppAuthList().then(res => {
        if (res.code === 200) {
          this.authForm.authList = res.data.authList
        }
      })
    },
    getFormInfo (id) {
      this.$api.getAuthFormInfo({ id }).then(res => {
        if (res.code === 200) {
          for (let key in this.authForm) {
            this.authForm[key] = res.data[key]
          }
        }
        this.authForm.end_time = new Date(res.data.end_time * 1000)
      })
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let ajaxUrl = this.authForm.id ? 'editMiniAppFormInfo' : 'addMiniAppFormInfo'
          let subForm = JSON.parse(JSON.stringify(this.authForm))
          subForm.end_time = parseInt((new Date(subForm.end_time).getTime()) / 1000)
          this.$api[ajaxUrl](subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.$router.back(-1)
            }
          })
        }
      })
    },
    getCopyrightList () {
      this.$api.getAllCopyrightData().then(res => {
        if (res.code === 200) {
          this.copyrightOptions = this.copyrightOptions.concat(...res.data)
        }
      })
    },
    getminiAppList () {
      this.$api.getAllMiniApp().then(res => {
        if (res.code === 200) {
          this.miappOptions = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-textarea {
  width: 400px;
}
</style>
